<template>
  <div class="netMain">
    <div class="netLeft">
      <div class="table">
        <el-table
          :data="tableData1"
          border
          style="width: 100%; height: 100%; background: rgb(220, 220, 220)"
        >
          <el-table-column prop="networkName" label="网络名称">
          </el-table-column>
          <el-table-column prop="IP" label="主机IP地址"> </el-table-column>
          <el-table-column prop="mask" label="子网掩码"> </el-table-column>
        </el-table>
      </div>
      <div class="buttons">
        <button @click="addIP">添 加 IP</button>
        <button>删 除 IP</button>
      </div>
    </div>
    <div class="netMid">
      <div class="table">
        <el-table
          :data="tableData2"
          border
          style="width: 100%; height: 100%; background: rgb(220, 220, 220)"
        >
          <el-table-column prop="networkName" label="网络名称">
          </el-table-column>
          <el-table-column prop="IP" label="网关"> </el-table-column>
        </el-table>
      </div>
      <div class="buttons">
        <button @click="addNet">添 加 网 关</button>
        <button>删 除 网 关</button>
      </div>
    </div>
    <div class="netRight">
      <div>
        <button
          v-for="(item, index) in netButtons"
          :key="index"
          :class="{ isSetted: currentIndex === index }"
          @click="change(item, index)"
        >
          {{ item }}
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
// const isIndexOne=(index)=>{
//     return index=1
// }
const router = useRouter();
const tableData1 = ref([
  { networkName: "VMNETWORK", IP: "192.168.1.0", mask: "255.255.255" },
  { networkName: "VMNETWORK", IP: "192.168.1.0", mask: "255.255.255" },
  { networkName: "VMNETWORK", IP: "192.168.1.0", mask: "255.255.255" },
  { networkName: "VMNETWORK", IP: "192.168.1.0", mask: "255.255.255" },
]);

const tableData2 = ref([
  {
    networkName: "VMNETWORK2",
    IP: "192.168.0.0",
  },
]);
const netButtons = ref(["IP管理", "Ping"]);
const currentIndex = ref(0);
const change = (item, index) => {
  currentIndex.value = index;
  if(index===1){
    router.push('/PING')
    console.log("11,pingle")
  }
};
const addNet=()=>{
    router.push('/addNet')
}
const addIP=()=>{
    router.push('/addIP')
    console.log("ipip")
}
</script>
<style scoped>
@import url("./network_setting.less");
</style>